import {ScrollView, View, Text, Image} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import {AtIcon} from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
import uesrImg from '@/assets/image/my/uesr_pic.png';
import lanjingLogo from '@/assets/image/member/lanjing-logo.png';
import chijingLogo from '@/assets/image/member/chijing-logo.png';
import lanjingCardLogo from '@/assets/image/member/lanjing-cardlogo.png';
import chijingCardLogo from '@/assets/image/member/chijing-cardLogo.png';
import noMemberCardLogo from '@/assets/image/my/ordinary.png';
import dayjs from 'dayjs';
actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class ActivationRecord extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      checkTab: 0,
      navBarHeight: 0,
      navBarPadding: 0,
      // navBarPaddingR: 0,
    };
  }

  componentDidMount() {
    this.getNavHeight();
    this.props.actions.init();
  }
  componentWillUnmount(): void {
    this.props.actions.clean();
  }
  getNavHeight() {
    const menuButtonObject = Taro.getMenuButtonBoundingClientRect();

    let menuBottonHeight = menuButtonObject.height;
    let navBarPadding = menuButtonObject.top;
    let navBarHeight = menuBottonHeight + navBarPadding;
    // const navBarPaddingR = (sysinfo.windowWidth - (menuButtonObject.right - menuButtonObject.width)) * 2
    this.setState({
      navBarHeight,
      navBarPadding: navBarPadding,
      // navBarPaddingR,
    });
  }
  checkTabs(e: number) {
    this.setState({
      checkTab: e,
    });
    const kv = {
      0: undefined,
      1: 0,
      2: 1,
    };
    this.props.actions.action.commonChange('main.list', []);
    this.props.actions.action.commonChange('main.searchForm', {
      memberType: kv[e],
      pageNum: -1,
    });
    this.props.actions.action.page();
  }
  render() {
    const {
      main: {list, customer, memberCardType, memberInfo, type},
    } = this.props;
    const cardType = ['月卡', '季卡', '半年卡', '年卡', '连续包月'];
    const payMethod = {
      WECHAT: '微信支付',
    };
    let logo: string | null = null;
    if (['noMember'].includes(memberCardType)) {
      logo = noMemberCardLogo;
    }
    if (['lanjing'].includes(memberCardType)) {
      logo = lanjingCardLogo;
    }
    if (['chijing'].includes(memberCardType)) {
      logo = chijingCardLogo;
    }
    let types = type;
    return (
      <View className="activationRecord">
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            paddingTop: `${this.state.navBarPadding}px`,
            height: `${this.state.navBarHeight}px`,
          }}
        >
          <AtIcon
            onClick={() => {
              Taro.navigateBack();
            }}
            customStyle={{zIndex: 2}}
            value="chevron-left"
            size="30"
            color="#000"
          ></AtIcon>
          <View
            style={{
              fontSize: '36rpx',
              fontWeight: 500,
              color: '#333333',
              margin: '0 auto',
              zIndex: 2,
              transform: 'translateX(-36%)',
            }}
          >
            开通记录
          </View>
        </View>
        <View className="activationRecord-bg"></View>
        <View className="activationRecord-card">
          <Image
            src="https://ruiyinmall.oss-cn-nanjing.aliyuncs.com/ruizhimini/card.png"
            className="activationRecord-cardImage"
          />
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Image
              className="activationRecord-userHeader"
              src={customer?.pictureUrl ? customer?.pictureUrl : uesrImg}
            />
            <View style={{zIndex: 1}}>
              <Text className="activationRecord-userName">{customer?.name}</Text>
              {logo && <Image src={logo} className="activationRecord-cardLogo" />}
            </View>
          </View>
          <Text
            style={{
              fontSize: '24rpx',
              color: '#586490',
              zIndex: 1,
              marginTop: 'auto',
            }}
          >
            {memberInfo && memberInfo.endTime ? `${memberInfo.endTime}到期` : ''}
          </Text>
        </View>
        <View className="activationRecord-tabs">
          <Text onClick={() => this.checkTabs(0)} className={`tab ${this.state.checkTab == 0 ? 'tab-check' : ''}`}>
            全部
          </Text>
          <Text onClick={() => this.checkTabs(1)} className={`tab ${this.state.checkTab == 1 ? 'tab-check' : ''}`}>
            蓝晶会员
          </Text>
          <Text onClick={() => this.checkTabs(2)} className={`tab ${this.state.checkTab == 2 ? 'tab-check' : ''}`}>
            赤晶会员
          </Text>
        </View>
        <ScrollView
          scrollY
          style={{padding: '0 32rpx', height: 'calc(100vh - 320px)'}}
          enableFlex
          onScrollToLower={() => {
            if (types === 'more') {
              types = 'loading';
              this.props.actions.action.commonChange('main.type', 'loading');
              this.props.actions.action.page();
            }
          }}
        >
          {list.map((e) => (
            <View className="activationRecord-payCard" key={e.id}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Image className="memberLogo" src={e.memberType == 0 ? lanjingLogo : chijingLogo} />

                <Text className={`memberName memberName-${e.memberType == 0 ? 'lanjing' : 'chijing'}`}>
                  {e.memberType == 0 ? '蓝晶会员' : '赤晶会员'}
                </Text>
                <Text className={`timer timer-${e.memberType == 0 ? 'lanjing' : 'chijing'}`}>
                  {cardType[e.cardType]}
                </Text>
              </View>
              <Text className="text1">会员购买时间:{dayjs(e.openTime).format('YYYY-MM-DD HH:mm:ss')}</Text>
              <Text className="text1">会员到期时间:{dayjs(e.endTime).format('YYYY-MM-DD HH:mm:ss')}</Text>
              <Text className="text1">支付方式:{payMethod[e.payMethod] || '其他'}</Text>
            </View>
          ))}
          {list.length <= 0 && (
            <View className="noneList">
              <Image
                src="https://ruiyinmall.oss-cn-nanjing.aliyuncs.com/ruizhimini/noneList.png"
                className="noneList-image"
              />
              您还没有开通记录哦～
            </View>
          )}
        </ScrollView>
      </View>
    );
  }
}
